import React, { useEffect, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Form, Row, Col, Input, Select, Table, Button, Space, Popconfirm, message, Modal } from 'antd';
import { deleteListPage, getListPage, ListPage, patchListPage } from '../../services/ant-design-pro/api';
import ProTable from '@ant-design/pro-table';
import style from "./index.less"
import { RedoOutlined } from '@ant-design/icons';
const { Option } = Select;
export type TableListItem = {

};
const Page: React.FC = () => {
    const [page, setPage] = useState([]);
    const [count, setCount] = useState(1)
    useEffect(() => {
        getListPage().then(res => {
            setPage(res[0])
        })
    }, [count])
    const tableListDataSource: TableListItem[] = [];
    page.forEach((item: any) => {
        tableListDataSource.push({
            key: item.id,
            ...item
        })
    })
    const AdvancedSearchForm = () => {
        const [form] = Form.useForm();
        const getFields = () => {
            const children = [];
            children.push(
                <Col span={5} key={0}>
                    <Form.Item
                        name="name"
                        label="名称"
                    >
                        <Input placeholder="请输入页面名称" />
                    </Form.Item>
                </Col>,
                <Col span={5} key={1}>
                    <Form.Item
                        name="path"
                        label="路径"
                    >
                        <Input placeholder="请输入页面路径" />
                    </Form.Item>
                </Col>,
                <Col span={5} key={2}>
                    <Form.Item
                        name="status"
                        label="状态"
                    >
                        <Select>
                            <Option value="publish">已发布</Option>
                            <Option value="draft">草稿</Option>
                        </Select>
                    </Form.Item>
                </Col>,

            );
            return children;
        };

        const onFinish = (values: any) => {
            ListPage(values).then(res => {
                setPage(res[0])
            })
        };

        return (
            <Form
                form={form}
                name="advanced_search"
                className="ant-advanced-search-form"
                onFinish={onFinish}
                style={{ background: "#fff", padding: "24px 12px", margin: "0,16px" }}
            >
                <Row gutter={24}>{getFields()}</Row>
                <Row>
                    <Col span={24} style={{ textAlign: 'right' }}>
                        <Button type="primary" htmlType="submit">
                            搜索
                        </Button>
                        <Button
                            style={{ margin: '0 8px' }}
                            onClick={() => {
                                form.resetFields();
                            }}
                        >
                            重置
                        </Button>
                    </Col>
                </Row>
            </Form>
        );
    };
    const statusCode = (item: any) => {
        patchListPage(item).then(res => {
            console.log(res);
            if (res) {
                message.success('操作成功')
                setCount(count + 1)
            }
        })
    }
    const confirm = (it: any) => {
        deleteListPage(it.id).then(res => {
            if (res) {
                message.success('删除成功')
                setCount(count + 1)
            }
        })
    }
    const columns = [
        {
            title: '名字',
            dataIndex: 'name',
        },
        {
            title: '路径',
            dataIndex: 'path',
        },
        {
            title: '顺序',
            dataIndex: 'order',
        },
        {
            title: '阅读量',
            dataIndex: 'views',
        }, {
            title: '状态',
            dataIndex: 'status',
            valueEnum: {
                draft: {
                    text: '草稿',
                    status: 'Warning',
                },
                publish: {
                    text: '已发布',
                    status: 'Success',
                },
            },
        },
        {
            title: '发布时间',
            dataIndex: 'updateAt',
        },
        {
            title: '操作',
            render: (record: any) => {
                // console.log(record);
                return (
                    <div>
                        <a style={{ marginRight: "10px" }} onClick={() => {
                            console.log(record);
                        }}>编辑</a>
                        <a style={{ marginRight: "10px" }} onClick={() => statusCode(record)}>{record.status == "publish" ? "下线" : "发布"}</a>
                        <a style={{ marginRight: "10px" }} onClick={showModal}>查看访问</a>
                        <Modal title="访问统计" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} footer={null}>
                            
                        </Modal>
                        <Popconfirm
                            title="确认删除这个评论？"
                            onConfirm={() => confirm(record)}
                            okText="Yes"
                            cancelText="No"
                        >
                            <a>删除</a>
                        </Popconfirm>
                    </div>
                )
            },
        },
    ];
    const [isModalVisible, setIsModalVisible] = useState(false);

    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    return (
        <div
            style={{
                background: '#F5F7FA',
            }}
        >
            <PageContainer
                fixedHeader
                header={{
                    title: '',
                    breadcrumb: {
                        routes: [
                            {
                                path: '/dashboard',
                                breadcrumbName: '工作台',
                            },
                            {
                                path: '/page',
                                breadcrumbName: '页面管理',
                            },
                        ],
                    },
                }}

            >
                <div className={style.top}><AdvancedSearchForm /></div>

                <ProTable<TableListItem >
                    columns={columns}
                    rowSelection={{
                        selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
                        defaultSelectedRowKeys: [0],
                    }}
                    tableAlertRender={() => (
                        <Space size={24}>
                            <button>通过</button>
                            <button>拒绝</button>
                            <button>删除</button>
                        </Space>
                    )}
                    dataSource={tableListDataSource}
                    options={false}
                    search={false}
                    rowKey="key"
                    toolBarRender={() => [<RedoOutlined />]}
                />

            </PageContainer>
        </div>
    )
}
export default Page